<template>
  <div class="app-container">
      <div style="line-height: 50px"><span style="font-size:16px;color:#606266;font-weight: bold">模版名称：{{templateName}}</span></div>
      <div style="float:left;width:300px;">
          <div style="margin-bottom:20px;">
              <el-button
                      size="mini"
                      type="primary"
                      class="btn-add"
                      @click="showDepartment('add',null)">
                  新增项目
              </el-button>
          </div>
        <div style="border:1px solid #eee;height:calc(100vh - 150px);padding:20px 10px;overflow: auto">
          <div v-loading="listLoading">
              <el-tree
                      @node-click="nodeClick"
                      :highlight-current="true"
                      :data="data"
                      node-key="id"
                      default-expand-all
                      :props="props"
                      :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span style="width:180px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ node.label }}</span>
                <span>
<!--                  <el-button-->
<!--                          type="text"-->
<!--                          size="mini"-->
<!--                          @click.stop.native="showDepartment('edit',data)">-->
<!--                    修改-->
<!--                  </el-button>-->
                  <el-button
                          type="text"
                          size="mini"
                          @click.stop.native="remove(data)">
                    删除
                  </el-button>
                </span>
              </span>
              </el-tree>
          </div>
        </div>
      </div>
      <div style="float:left;width:calc(100% - 350px);margin-left:20px">
          <div style="margin-bottom:20px;overflow: hidden">
              <el-button
                      style="float:right"
                      size="mini"
                      class="btn-add"
                      @click="goBack">
                  返回
              </el-button>
              <el-button
                      style="float:right"
                      size="mini"
                      type="primary"
                      class="btn-add"
                      @click="toTplInfo">
                  预览
              </el-button>
          </div>
        <div style="border:1px solid #eee;height:calc(100vh - 150px);padding:20px;position: relative" class="manageForm-div" v-if="show">
          <el-form :model="itemForm" size="mini" label-width="100px" :rules="rules" ref="itemForm">
                <el-form-item label="项目名称：" prop="itemName">
                  <el-input v-model="itemForm.itemName" placeholder="" style="width:400px" ></el-input>
                </el-form-item>
              <el-form-item label="父级：" prop="parentId">
                  <el-select v-model="itemForm.parentId">
                      <el-option :value="0" label="一级"></el-option>
                      <el-option v-for="item in data" :value="item.itemId" :label="item.itemName" :key="item.itemId"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="类型：" prop="itemType" v-if="itemForm.parentId !=0">
                  <el-radio-group v-model="itemForm.itemType">
                      <el-radio label="other_score">评分</el-radio>
                      <el-radio label="self_input">自评</el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="分值：" prop="itemScore" v-if="itemForm.parentId !=0">
                  <el-input v-model="itemForm.itemScore"  style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="评分标准：" v-if="itemForm.parentId !=0">
                  <el-button type="text" @click="addVal">+ 添加评分标准</el-button>
                  <el-table
                          :data="itemForm.itemValues"
                          border
                          style="width: 600px">
                      <el-table-column
                              label="名称"
                              align="center">
                          <template slot-scope="scope">
                              <el-input v-model="scope.row.name"></el-input>
                          </template>
                      </el-table-column>
                      <el-table-column
                              prop="operateTime"
                              label="操作"
                              align="center"
                              width="100">
                          <template slot-scope="scope">
                              <el-button type="text" @click="delVal(scope.$index)">删除</el-button>
                          </template>
                      </el-table-column>
                  </el-table>
              </el-form-item>
          </el-form>
          <div style="width:100%;text-align: center">
            <el-button type="primary" @click="handleConfirm" size="small" :loading="btnLoading">保 存</el-button>
          </div>
        </div>
      </div>

  </div>
</template>
<script>
  import {itemList,addItem,delItem} from '@/api/partner'
  import store from '@/store'
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 1000,
  };
  const defaultItemForm = {
      "itemId":0,
      "templateId" : 0,
      "itemName" : "",
      "parentId" : 0,
      "itemType" : "other_score",
      "itemScore" : 0,
      "itemValues" : []
  };
  export default {
    name: "managementSetting",
    data(){
      return{
          listQuery: Object.assign({}, defaultListQuery),
          itemForm:JSON.parse(JSON.stringify(defaultItemForm)),
          roles:store.getters.roles ? store.getters.roles : [],
          rules: {
              itemName: [{required: true, message: '请输入项目名称', trigger: 'blur'},],
              parentId: [{required: true, message: '请选择父级', trigger: 'change'},],
              itemType: [{required: true, message: '请选择类型', trigger: 'change'},],
              itemScore: [{required: true, message: '请输入分值', trigger: 'blur'},],
          },
          data : [],
          props: {
              label: 'itemName',
              children: 'subItems'
          },
          btnLoading:false,
          show:false,
          listLoading:false,
          templateName:this.$route.query.templateName,
          templateId:this.$route.query.templateId,
      }
    },
    created() {
      this.getItemList();
    },
    computed: {

    },
    filters: {

    },
    methods:{
        goBack(){
            this.$router.back();
        },
        toTplInfo(){
            this.$router.push({name:'templateView',query:{templateId:this.templateId,type:'preview'}});
        },

        //部门树结构点击时
        nodeClick(data){
            this.showDepartment('edit',data)
        },

        //显示新增项目
        showDepartment(type,item){
            this.show = true;
            if(type == 'edit'){
                this.itemForm.itemId = item.itemId;
                this.itemForm.itemName = item.itemName;
                this.itemForm.parentId = item.parentId;
                this.itemForm.itemType = item.itemType ? item.itemType : 'other_score';
                this.itemForm.itemScore = item.itemScore ? item.itemScore : 0;
                this.itemForm.itemValues = item.itemValues ? item.itemValues : [];
            }else{
                this.itemForm = JSON.parse(JSON.stringify(defaultItemForm));
            }
            this.itemForm.templateId = this.templateId;

        },

        //增加评分标准
        addVal(){
            this.itemForm.itemValues.push({name:''})
        },

        //删除评分标准
        delVal(index){
            this.itemForm.itemValues.splice(index,1)
        },



        //获取项目列表
        getItemList(){
            itemList({templateId:this.templateId}).then((res)=>{
                this.data = res;
            })
        },





      //新增编辑
      handleConfirm(){
        this.$refs.itemForm.validate((valid) => {
          if (valid) {
              this.btnLoading = true;
              addItem(this.itemForm).then(response => {
                  this.btnLoading = false;
                  this.$message({
                      message: '提交成功',
                      type: 'success',
                      duration: 1000
                  });
                  this.getItemList();
              }).catch(()=>{
                  this.btnLoading = false;
              })
          }
        });
      },

      //删除
      remove(item){
          this.$confirm('确定删除此项吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              delItem({itemId:item.itemId}).then(()=>{
                  this.getItemList();
                  this.show = false;
                  this.$message({
                      type: 'success',
                      message: '删除成功!'
                  });
              });

          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },

    }

  }
</script>

<style lang="scss">
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 8px;
        .el-tree-node__content{
            line-height: 30px;
        }
    }
</style>
